<template>
	<div class="detail_container">
		<div class="pdf_view" v-if="pdf_view_url"  style="top: 0rpx;">
			<div style="text-align: center;background-color: #fff;height: 50px;margin-top: -20px;width: 100%;" class="pdfViewBtn"  @click="pdf_view_url = ''">
				<span class="pdfViewBtn" style="margin: 0 auto;">关闭</span>
			</div>
			<scroll-view :scroll-y="true" class="scrollView" style="min-height: 95vh;text-align: right;">
				<iframe style="width: 100%; height: 95vh;" :src="pdf_view_url" frameborder="0"></iframe>
			</scroll-view>
		</div>
		
		
		<div class="detail_dir">
			目录: {{ chapterName }}
		</div>
		<div style="margin-top: 20px;">
			<scroll-view :scroll-x="true" class="scrollView">
				<div style="display: flex;justify-content: center;">
					
					<div v-if="teachingaimsPreview.length" @click="changeIndex(1)" :class="'bread' + ' ' + (activeIndex == 1 ? 'current' : '')">
						{{ teachingaimsAlias }}
					</div>
					<div v-if="coursewarePreview.length" @click="changeIndex(2)" :class="'bread' + ' ' + (activeIndex == 2 ? 'current' : '')">
						{{ coursewareAlias }}
					</div>
					<div v-if="videoPreview.length" @click="changeIndex(3)" :class="'bread' + ' ' + (activeIndex == 3 ? 'current' : '')">
						{{ videoAlias }}
					</div>
					<div v-if="testPreview.length" @click="changeIndex(4)" :class="'bread' + ' ' + (activeIndex == 4 ? 'current' : '')">
						{{ testAlias }}
					</div>
				</div> 
			</scroll-view>
		</div>
		<div style="width: 100%;height: auto;margin-top: 50rpx;">
			<div v-if="activeIndex == 1">
				<scroll-view v-for="(item, index) in teachingaimsPreview" :key="index" :scroll-y="true" class="scrollView" style="min-height: 800rpx;text-align: right;">
					<!-- <view>{{'./static/pdfjs/web/viewer.html?file=' + encodeURI(item)}}</view> -->
					<iframe style="width: 100%; height: 900rpx;" :src="'./static/pdfjs/web/viewer.html?file=' + item" frameborder="0"></iframe>
					<div style="text-align: right;">
						<a @click="pdfViewMethod(item)" v-if="teachingaimsEdit.length !== 0 && teachingaimsEdit[index]" class="pdfViewBtn">预览</a>
						<a @click="docDownload(teachingaimsEdit[index])" v-if="teachingaimsEdit.length !== 0 && teachingaimsEdit[index]" class="downFile">下载</a>
					</div>
				</scroll-view>
			</div>
			<div v-if="activeIndex == 2">
				<scroll-view v-for="(item, index) in coursewarePreview" :key="index" :scroll-y="true" class="scrollView" style="min-height: 800rpx;text-align: right;">
					<iframe style="width: 100%; height: 900rpx;" :src="item" frameborder="0"></iframe>
					<div style="text-align: right;">
						<a @click="pdfViewMethod(item)" v-if="coursewareEdit.length !== 0 && coursewareEdit[index]" class="pdfViewBtn">预览</a>
						<!--  #ifdef  APP-PLUS -->
							<span class="downFile" @click="docDownload(item)">下载</span>
						<!--  #endif -->
						<!-- #ifndef APP-PLUS -->
						<a @click="docDownload(coursewareEdit[index])" v-if="coursewareEdit.length !== 0 && coursewareEdit[index]" class="downFile">下载</a>
						<!-- #endif -->
					</div>
				</scroll-view>
			</div>
			<div v-if="activeIndex == 3">
				
				<div v-for="(item, index) in videoPreview" :key="index" style="margin-bottom: 100rpx;">
					<div style="text-align: center;">
						<video :src="item" controls style="margin: 0 auto;"></video>
					</div>
					<div style="text-align: right;padding: 0 60rpx;">
						<!--  #ifdef  APP-PLUS -->
							<span class="downFile" @click="docDownload(videoDown[index])">下载</span>
						<!--  #endif -->
						<!-- #ifndef APP-PLUS -->
						<a v-if="videoDown.length !== 0 && videoDown[index]" @click="docDownload(videoDown[index])" class="downFile">下载</a>
						<!-- #endif -->
					</div>
				</div>
			</div>
			<div v-if="activeIndex == 4">
					<div class="exam_list" style="margin-top: 20px;">
						<div class="exam-item" style="margin-top: 50rpx;" v-for="(item, i) in testPreview" :key="i">
							<div class="content-title">
								测试题
							</div>
					            <div style="display: flex;width: 100%;">
					                <div class="exam-title"> {{ i + 1 }}: </div>
					                <div class="exam-content">
					                    <span style="font-weight: bolder;" v-if="item.type == 1">(单选题)</span>
					                    <span style="font-weight: bolder;" v-if="item.type == 2">(多选题)</span>
					                    <span style="font-weight: bolder;" v-if="item.type == 3">(判断题)</span>
					                    {{ item.title }}
					                </div>
					            </div>
					            <div style="display: flex;width: 100%;margin-top: 10px;" v-if="item.type == 1 || item.type == 2">
					                <div class="exam-title">选项:</div>
					                <div class="exam-content" style="text-indent: 0;">
					                <p v-for="(option, index) in item.choose" :key="index">
					                    <span>{{ xuanxiang[index] }}</span>:
					                    <span>{{ option }}</span>
					                </p>
					                </div>
					            </div>
					            <div style="display: flex;width: 100%;margin-top: 10px;">
					                <div class="exam-title">答案:</div>
					                <div style="display: flex; align-items: center;">
										<template v-if="item.type == 1 || item.type == 2">
												<template v-if="!item.showTrueAnswer">
													<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
													</span>
													<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
													</span>
												</template>
												<template v-else>
													<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
													</span>
													<span style="text-decoration: underline;" v-for="ite in item.answer">{{ xuanxiang[ite - 1] }}</span>
													<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
													</span>
												</template>
											</template>
											<template v-if="item.type == 3">
												<template v-if="!item.showTrueAnswer">
													<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
													</span>
													<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
													</span>
												</template>
												<template v-else>
													<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
													</span>
													<span style="text-decoration: underline;">{{ item.answer[0] == 1 ? '√' : '×' }}</span>
													<span style="text-decoration: underline;white-space: pre-wrap;display: inline-block;" v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'">
													</span>
												</template>
											</template>
											
											<template>
												<a style="margin-left: 20rpx;position: relative; top: -10rpx;" v-if="!item.showTrueAnswer" @click="item.showTrueAnswer = !item.showTrueAnswer" class="downFile">提示</a>
												<a style="margin-left: 20rpx;position: relative; top: -10rpx;" v-else @click="item.showTrueAnswer = !item.showTrueAnswer" class="downFile downFiless">关闭提示</a>
											</template>
										
					                   <!-- <div v-if="item.type == 1">
											<span v-for="ite in item.answer">{{ xuanxiang[ite - 1] }}</span>
										</div>
					                    <div v-if="item.type == 2">
											<span v-for="ite in item.answer">{{ xuanxiang[ite - 1] }}</span>
										</div>
					                    <div v-if="item.type == 3">
											<span v-if="item.answer[0] == '2'">×</span>
											<span v-else>√</span>
										</div> -->
					                </div>
					            </div>
					            </div>
				  </div>
				  <div style="text-align: right; padding: 0 30rpx;margin-top: 30rpx;" :key="item" v-for="item in testEdit">
					  <a class="downFile" @click="docDownload(item)">下载</a>
				  </div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chapterId: "",
				teachingaimsAlias: "教案",
				teachingaimsPreview: [],
				teachingaimsEdit: [],
				coursewareAlias: "",
				videoAlias: "",
				testAlias: "",
				
				testEdit: [],
				testPreview: [],
				videoPreview: [],
				videoDown: [],
				coursewareEdit: "",
				coursewarePreview: [],
				
				activeIndex: 1,
				
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'],
				pdf_view_url: ""
			}
		},
		onLoad(option) {
			this.chapterId = option.chapterId;
			this.chapterName = option.chapterName;
			this.getChapterDetail(this.chapterId);
		},
		methods: {
			//ios下载
			docDownload(url){
				var urlStr = encodeURI(url)
				//#ifdef APP-PLUS
				if (plus.os.name == 'Android') {　
				    plus.runtime.openURL(urlStr);
				}else if(plus.os.name == 'iOS'){　
					plus.runtime.openURL(urlStr);
				}else{
					
				}
				//#endif
			},
			pdfViewMethod(item) {
				this.pdf_view_url = item;
			},
			getChapterDetail(chapterId) {
				this.pyReq(this.$http.getChapterDetail, { chapterId },(res) => {
					const { 
						teachingaimsAlias,
						teachingaimsPreview,
						coursewareAlias,
						videoAlias,
						testAlias,
						teachingaimsEdit,
						testEdit,
						testPreview,
						videoPreview,
						coursewareEdit,
						coursewarePreview,
						videoDown
					} = res.result;
					this.teachingaimsAlias = teachingaimsAlias || "教案";
					this.teachingaimsPreview = teachingaimsPreview || [];
					this.coursewareAlias = coursewareAlias || "课件";
					this.videoAlias = videoAlias || "视频";
					this.testAlias = testAlias || "测试题";
					this.teachingaimsEdit = teachingaimsEdit || [];
					this.testEdit = testEdit || [];
					this.testPreview = (testPreview || []).map(item => {
						return {
							...item,
							showTrueAnswer: false
						}
					});
					// this.videoPreview =  (videoPreview || []).map(item => encodeURI(item));
					this.videoPreview =  (videoPreview || []);
					
					this.coursewareEdit = coursewareEdit || [];
					this.coursewarePreview = coursewarePreview || [];
					this.videoDown = videoDown || [];
					if(this.teachingaimsPreview.length) {
						this.activeIndex = 1;
					} else if(this.coursewarePreview.length) {
						this.activeIndex = 2;
					} else if(this.videoPreview.length) {
						this.activeIndex = 3;
					} else if(this.testPreview.length) {
						this.activeIndex = 4;
					}
				});
			},
			changeIndex(idx) {
				this.activeIndex = idx;
			},
			downVideoFile(fileUrl) {
				console.log(fileUrl);
				uni.downloadFile({
					url: fileUrl,
					success: (res) => {
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								if (res.errMsg.indexOf('saveVideoToPhotosAlbum:ok') !== -1) {
									uni.showToast({
										title: "下载成功",
										icon: 'success',
										duration: 2000
									})
								}
							},
							fail: err => {
								console.log("err", err);
								uni.showToast({
									title: "下载失败",
									icon: 'error',
									duration: 2000
								})
							}
						})
					},
					fail: (err) => {
						console.log("err, ", err);
					}
				})
			},
			downFilePdf(fileUrl) {
				// fileUrl = encodeURIComponent(Base64.encode(encodeURI(item)));
				fileUrl = decodeURI(Base64.decode(decodeURIComponent(fileUrl)));
				console.log(fileUrl);
				uni.downloadFile({
					url: fileUrl,
					success: (res) => {
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: (res) => {
								console.log(res);
								if (res) {
									setTimeout(() => {
																//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							},
							fail: err => {
								console.log("err", err);
								uni.showToast({
									title: "下载失败",
									icon: 'error',
									duration: 2000
								})
							}
						})
					},
					fail: (err) => {
						console.log("err, ", err);
					}
				})
			}
		}
	}
</script>

<style>
	.content-title {
		font-size: 40rpx;
		font-weight: bolder;
		margin-left: -16rpx;
		border-top: 1px dashed #eee;
	}
	.downFiless{
		background-color:#409EFF ;
	}
	.detail_dir{
		font-size: 18px;
	}
	.detail_container{
		padding: 20rpx 10rpx;
	}
	.bread {
		min-width: 200rpx;
		color: #000;
		font-weight: 300;
		font-size: 28rpx;
		text-decoration: none;
		text-align: center;
		line-height: 52rpx;
		margin: 0;
		display: inline-block;
		appearance: none;
		cursor: pointer;
		border: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .3s;
		transition-duration: .3s;
		margin-right: 10rpx;
	}
	.bread:last-child{
		margin-right: 0;
	}
	.bread.current {
		position: relative;
		color: #FF4351;
		font-weight: bolder;
	}
	.bread.current::after {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 50%;
		height: 1px;
		background-color: #FF4351;
		transform: translateX(-50%);
	}
	
	
	.tr {
	    text-align: right;
	}
	.exam_list {
		padding: 0 30rpx;
	}
	.exam-title {
		min-width: 80rpx;
		text-align: right;
		margin-right: 10rpx;
	}
</style>
